<template>
  <div>

    <div>QQ Music MV List</div>
    <div class="mv-content">
      <div class="item" v-for="item in mvList">
        <img :src="item.picurl" width="192" height="108">
        <div class="title">
          {{item.mvtitle}} <small class="author">({{item.singer_name}})</small><br>
          <small class="c-light-gray">{{item.mvdesc}}</small><br>
        </div>
        <small class="c-light-gray">{{item.pub_date}}</small>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "qqMusic",
    components: {},
    data() {
      return {
        mvList:[],
      }
    },
    async asyncData({$axios,route}){
      let res = await $axios({
        method: 'get',
        url: `/qqmusic/mv/fcgi-bin/getmv_by_tag?g_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=GB2312&notice=0&platform=yqq.json&needNewCode=0&cmd=shoubo&lan=all`
      })
      return {
        mvList:res.data.mvlist,
      }

    },
    head () {
      return {
        title: 'QQ MUSIC MV',
        meta:
          [
            {hid:'keywords', name: 'keywords', content: `QQ音乐 MV列表`},
            {hid:'description', name: 'description', content: `QQ音乐 MV列表`},
          ]
      }
    },
    mounted() {

    },
    methods: {},
    destroyed() {
    }
  }
</script>

<style lang="stylus" scoped>

  .c-light-gray{
    color:#a8a8a8
  }

  .mv-content{
    width:100%;
    padding-top:10px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;

    .item{
      width:200px;height:220px;

      img:hover{
        border-radius:5px;
        box-shadow #7f828b 0px 0px 15px;
      }

      .title{
        margin-top:6px;height:60px;
      }

      .author{
        color:#218ff2
      }
    }

  }




</style>
